<template>
	<view class="nav-bar">
		<view class="icon" @click="retreat">
			<image v-if="leftIconWhite" style="width: 64rpx;height: 64rpx;" src="@/static/images/icons/leftArrow.svg">
			</image>
			<image v-if="leftIconBlack" style="width: 64rpx;height: 64rpx;" src="@/static/images/icons/leftArrow_black.svg">
			</image>
		</view>
		<text class="title_b" :style="{'color':titleColor}">{{title}}</text>
		<view class="left-icon">
			<slot name="left" />
		</view>
		<view class="right-icon">
			<slot name="right" />
		</view>
		<view class="right-icon"  @click="rightClick">{{rightIconText}}</view>
	</view>
</template>

<script> 
	// import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
	export default {
		name: 'myNavTopBar',
		components: {
			// uniIcons
		}, // 局部注册
		props: {
			title: {
				type: String,
				default: ''
			},
			leftIconWhite: {
				type: Boolean,
				default: true
			},
			leftIconBlack: {
				type: Boolean,
				default: false
			},
			rightIconText:{
				type: String,
				default: ''
			},
			titleColor:{
				type: String,	
				default: '#fff'
			},
		},
		data() {
			return {

			}
		},
		created() {
		},
		methods: {
			retreat() {
				this.$tab.navigateBack()
			},
			rightClick(){
				this.$emit('tabChange')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;
		height: 90rpx;

		.icon {
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 9;
		}

		.back-icon {
			position: absolute;
			left: 30rpx;
		}
		.left-icon{
			position: absolute;
			left: 0;
			left: 100rpx;
			font-size: 28rpx;
			top:150rpx;
			z-index: 9;
		}
		.right-icon{
			position: absolute;
			right: 0;
			right: 20rpx;
			font-size: 28rpx;
			top:40%;
			z-index: 9;
		}
	}

	.title_b {
		font-size: 36rpx;
		color: #fff;
	}
	
</style>